<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
        <script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
 
    </head>
    <style type="text/css">
    	body{
    		background-color: rgb(239,239,244);
    		
    	}
    	p{
    		color: black;
    	}
    	ul,li{ 
    		color: black;
    		padding;margin:0;
    		margin-right:20px ;
    		}
    	.head{
    		height: 30px;
    	    background-color:white ;
 
    	}
   		h3{
   			color: steelblue;
		text-align: center;
		}
	
	span{
		color:steelblue;
	}
	.mid-top{
		width: 100%;
		height: 400px;
		border-top: 1px solid darkgray;
		border-bottom: 1px solid darkgray;
		}

	.foot{
		width: 100%;
	}
	.foot foot2 span1{
		margin-left: 100px;
	}
		    </style>

<body>

		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title" style="color: steelblue;">XX钢铁公司首页</h1>
		</header>
<div class="mid-top">
<div class="mui-slider">
  <div class="mui-slider-group mui-slider-loop">
    <!--支持循环，需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/4.jpg" style="height: 250px ;"/></a></div>
    <div class="mui-slider-item"><a href="#"><img src="img/1.jpg" style="height: 250px ;" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="img/2.jpg"  style="height: 250px ;"/></a></div>
    <div class="mui-slider-item"><a href="#"><img src="img/3.jpg"  style="height: 250px ;" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="img/4.jpg" style="height: 250px ;" /></a></div>
    <!--支持循环，需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/1.jpg" style="height: 250px ;"/></a></div>
  </div>
  
</div>
<div class="mui-content">
    <div class="mui-row">
<div class=" mui-col-xs-4">
	<h5 style="padding-left: 30px;">公司介绍</h5><br />
<p>XXX公司是XXX厂本地一级代理商，注册资金XX万元，是一家专业XX经销商、重合同守信用企业....</p>
    </div>
    <div class=" mui-col-xs-4">
	<h5 style="padding-left: 30px;">新闻动态</h5><br />
	<ul>
		<a href=""><li>666666666</li></a>
		<a href=""><li>666666666</li></a>
		<a href=""><li>666666666</li></a>
		<a href=""><li>666666666</li></a>
		<a href=""><li>666666666</li></a>
		
		
	</ul>
    </div>
    <div class=" mui-col-xs-4">
	<h5 style="padding-left: 30px;">联系方式</h5><br />
	<p style="margin-left: 30px;">地址：XX市</p>
	<p style="margin-left: 30px;">联系人：XX</p>
	<p style="margin-left: 30px;">电话：XX</p>
	
    </div>
</div>
</div>
<div class="mui-content"style="height: 100px;">
    <div class="mui-row">
        <div class="mui-col-xs-8">
   	<h5 style="padding-left: 30px;">产品展示</h5><br />
<div class="mui-slider">
  <div class="mui-slider-group">
    <div class="mui-slider-item"><a href="#"><img src="img/21.jpg" style="height: 30px ;width:100px;"/></a></div>
    <div class="mui-slider-item"><a href="#"><img src="img/22.jpg" style="height: 30px ;width: 100px;"/></a></div>
    <div class="mui-slider-item"><a href="#"><img src="img/23.jpg" style="height: 30px ;width: 100px;"/></a></div>
    <div class="mui-slider-item"><a href="#"><img src="img/24.jpg" style="height: 30px ;width: 100px;"/></a></div>
  </div>
</div>
        </div>
         <div class="mui-col-xs-4">
   	<h5 style="padding-left: 30px;">友情链接</h5><br />
<div class="mui-slider">
  <div class="mui-slider-group" style="padding-left: 40px;">
<a href="http://www.baidu.com"><span><p>百度一下</p></a>

  </div>
</div>
        </div>
</div>

</div>
</div><!--[if IE]>

<![endif]-->
<script type="text/javascript">
var gallery = mui('.mui-slider');
gallery.slider({
  interval:1000//自动轮播周期，若为0则不自动播放，默认为0；
});
</script>

<nav class="mui-bar mui-bar-tab" id="nav">
	<a  id="shouye" class="mui-tab-item mui-active" href="home.html" >
		<span class="mui-icon mui-icon-home"></span>
		<span class="mui-tab-label">首页</span>
	</a>
		<a  id="product" class="mui-tab-item mui-active" href="product.html" >
		<span class="mui-icon mui-icon mui-icon-pengyouquan"></span>
		<span class="mui-tab-label">产品</span>
	</a>
		<a  id="article" class="mui-tab-item mui-active" href="article.html">
		<span class="mui-icon mui-icon mui-icon-compose"></span>
		<span class="mui-tab-label">文章</span>
	</a>
		<a  id="admin" class="mui-tab-item mui-active" >
		<span class="mui-icon mui-icon-contact"></span>
		<span class="mui-tab-label">管理员</span>
	</a>
	
	
	</nav>
<script type="text/javascript" charset="utf-8">
      	mui.init({
      		subpages:[
      		{
      			url:'index.html',
      			id:'index.html',
/*      			styles:{
      				bottom:'70px',
      				top:'0'
      			}*/
      		},
      		{
      			url:'product.html',
      			id:'product.html',
      			styles:{
      				bottom:'70px',
      				top:'0'
      			}
      		},
      		{
      			url:'article.html',
      			id:'article.html',
      			styles:{
      				bottom:'70px',
      				top:'0'
      			}
      		},
      		{
      			url:'admin.html',
      			id:'admin.html',
      			styles:{
      				bottom:'70px',
      				top:'0'
      			}
      		}
      		]
      	})
      	var shouye=document.getElementById('shouye');
      	var koubei=document.getElementById('product');
      	var pengyou=document.getElementById('article');
      	var wode=document.getElementById('admin');
      	setTimeout(function(){
      		var shouyepage=plus.webview.getWebviewById('index.html');
      		var nanningpage=plus.webview.getWebviewById('product.html');
      		var fiendspage=plus.webview.getWebviewById('article.html');
      		var mainpage=plus.webview.getWebviewById('admin.html');
      		plus.webview.hide(nanningpage);
      		plus.webview.hide(mainpage);
      		plus.webview.hide(fiendspage);
      	},500)
      	shouye.addEventListener('tap',function(){
      		var shouyepage=plus.webview.getWebviewById('index.html');
      		var nanningpage=plus.webview.getWebviewById('product.html');
      		var fiendspage=plus.webview.getWebviewById('article.html');
      		var mainpage=plus.webview.getWebviewById('admin.html');
      		plus.webview.show(shouyepage);
      		plus.webview.hide(nanningpage);
      		plus.webview.hide(mainpage);
      		plus.webview.hide(fiendspage);
      	})
      	koubei.addEventListener('tap',function(){
      		var shouyepage=plus.webview.getWebviewById('index.html');
      		var nanningpage=plus.webview.getWebviewById('product.html');
      		var fiendspage=plus.webview.getWebviewById('article.html');
      		var mainpage=plus.webview.getWebviewById('admin.html');
      		plus.webview.hide(shouyepage);
      		plus.webview.show(nanningpage);
      		plus.webview.hide(mainpage);
      		plus.webview.hide(fiendspage);
      	})
      	pengyou.addEventListener('tap',function(){
      		var shouyepage=plus.webview.getWebviewById('index.html');
      		var nanningpage=plus.webview.getWebviewById('product.html');
      		var fiendspage=plus.webview.getWebviewById('article.html');
      		var mainpage=plus.webview.getWebviewById('admin.html');
      		plus.webview.hide(shouyepage);
      		plus.webview.hide(nanningpage);
      		plus.webview.hide(mainpage);
      		plus.webview.show(fiendspage);
      	})
      	wode.addEventListener('tap',function(){
      		var shouyepage=plus.webview.getWebviewById('index.html');
      		var nanningpage=plus.webview.getWebviewById('product.html');
      		var fiendspage=plus.webview.getWebviewById('article.html');
      		var mainpage=plus.webview.getWebviewById('admin.html');
      		plus.webview.hide(shouyepage);
      		plus.webview.hide(nanningpage);
      		plus.webview.show(mainpage);
      		plus.webview.hide(fiendspage);
      	})
    </script>

 
<!--	<div class="foot1">
			<span class="mui-icon mui-icon-pengyouquan"></span>
			<span class="mui-icon mui-icon-pengyouquan"></span>
			<span class="mui-icon mui-icon-pengyouquan"></span>
			<span class="mui-icon mui-icon-pengyouquan"></span>
	</div>
	<div class="foot2">
<a href=""><span class="span1">首页</a>
<a href=""><span class="span2">文章设置</a>
<a href=""><span class="span3">产品设置</a>
<a href=""><span class="span4">管理员</a>
</div>-->
<!--<script type="text/javascript" charset="utf-8">
      	mui.init({
      		subpages:[//首先加载首页  
                        {  
                            url:'home.html',  
                            id:'tab_home',  
                            styles:{  
                                top:'0px',  
                                bottom:'60px'  
                            }  
                        }  
                    ],  
            preloadPages:[//预加载其他页面  
                {  
                    url:'product.html',  
                    id:'tab_message',  
                    styles:{
	                top:'0px',
	                bottom:'60px'  
                    }  
                },  
                {  
	                url:'article.html',  
	                id:'tab_contact',  
	                styles:{  
	                    top:'0px',  
	                    bottom:'60px'  
	                }  
                },
                {
                	url:'admin.html',
                	id:'tab_setting',
                	styles:{
                		top:'0px',
                		bottom:'60px'
                	}
                }
            ] 
      	});
      	mui.plusReady(function(){
      		var tab_home,tab_message,tab_contact  
                mui("#nav").on("tap","#tab_home",function(){//点击触发   
                    tab_home=plus.webview.getWebviewById("tab_home");  
                    tab_home.show()  
                    tab_message.hide()
                    tab_contact.hide()
                    tab_setting.hide()
                })  
                mui("#nav").on("tap","#tab_message",function(){//点击触发  
                    tab_message=plus.webview.getWebviewById("tab_message");  
                    tab_message.show()  
                      
                })  
                mui("#nav").on("tap","#tab_contact",function(){//点击触发  
                    tab_contact=plus.webview.getWebviewById("tab_contact");  
                    tab_contact.show()  
                      
                })  
                mui("#nav").on("tap","#tab_setting",function(){//点击触发  
                	tab_setting=plus.webview.getWebviewById("tab_setting");
                	tab_setting.show()
                })
      	})
      	
    </script>-->
<!--
<form action="">
                <div class="form-group row">
                    <div class="col-xs-5">
                        <span>用户名 ：</span><input type="password" class="form-control" placeholder="请输入账号" style="width: 200px;"/>
                       
                    </div>
                </div>
                
                                <div class="form-group row">
                    <div class="col-xs-4">
                   <span> &nbsp;&nbsp;&nbsp;密码 ：</span><input type="password" class="form-control" placeholder="请输入密码"  style="width: 200px;"/>
                    </div>
                </div>
     <div class="form-group row">
                    <div class="col-xs-">
                        <span>验证码 ：</span><input type="password" class="form-control" placeholder="输入验证码" / style="width: 150px;">
                        <img src="" alt="验证码"  width="50" height="25"/>
                    </div>
                </div>
	  <div class="form-group">
	  	<br />
                    <div class="col-xs-5 div2">
                       <input type="button" value="注册" style="background-color: rgb(51,122,183); width: 100px;height: 40px;color: white;font-weight: bold;"
onclick="javascrtpt:window.location.href='login.html'">            
                    </div>
                </div>
	
</form>
</div>-->
</body>
</html>